<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="请假列表"
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" @click.native.stop="goBack" size="24"></u-icon>
				<u-icon v-if="$isPermission('leave_add')"  name="plus" size="24" @click.native.stop="add" ></u-icon>
			</view>
			
		</u-navbar>
		 <!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="请假列表"
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
		<view class="u-nav-slot" slot="left">
			<u-icon name="arrow-left" @click.native.stop="goBack" size="24"></u-icon>	
		</view>
		<view class="u-nav-slot" slot="right">
			<u-icon  name="plus" v-if="$isPermission('leave_add')" size="24" @click.native.stop="add" ></u-icon>
		</view>
		</u-navbar>
		 <!-- #endif -->
		 <u-sticky bgColor="#fff">
		   <u-tabs lineColor='#1cb8a7' :scrollable='false' :list="list1" @click="clickTab"></u-tabs>
		  </u-sticky>
		<view class="content">
			<view class="card" v-for="(it,i) in listTable" :key="i" @click="goDetail(it)">
				<view class="top">
					<view class="classify">
						<view class="">
							<text class="iconfont icon-qingjia-m" style="margin-right: 15rpx;color: rgb(149, 123, 247);"></text>请假管理
						</view>
						<view class="state" v-if='it.applyStatus==4' :style="{color:stateList[0].color,backgroundColor:stateList[0].bgc}">
							{{stateList[0].text}}
						</view>
						<view class="state" v-if='it.applyStatus==5' :style="{color:stateList[1].color,backgroundColor:stateList[1].bgc}">
							{{stateList[1].text}}
						</view>
						<view class="state" v-if='it.applyStatus==3' :style="{color:stateList[2].color,backgroundColor:stateList[2].bgc}">
							{{stateList[2].text}}
						</view>
						<view class="state" v-if='it.applyStatus==6' :style="{color:stateList[3].color,backgroundColor:stateList[3].bgc}">
							{{stateList[3].text}}
						</view>
					</view>
				</view>
				<view class="center">
					<view class="">
						请假类型:<text >{{leaveTypes(it.leaveType)}}</text>
					</view>
					<view class="">
						开始时间:<text>{{it.startTime}}</text>
					</view>
					<view class="">
						结束时间:<text>{{it.endTime}}</text>
					</view>
				</view>
				<view class="bottom">
					<view class="bottomImg">
						<image style="vertical-align: middle" src="@/static/avatar.png" alt="" />
						<text style="vertical-align: middle;">{{it.applyUserName}}</text>
					</view>
					<view class="" style="color: #8a8b8c;">
						{{it.createTime}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<!-- <u-tabbar :value="tabbarIndex"  :fixed="true" :border="true" activeColor="#1cb8a7">
			<u-tabbar-item text="申请" icon="edit-pen-fill" @click="clickTabbar"></u-tabbar-item>
			<u-tabbar-item text="列表" icon="file-text-fill" @click="clickTabbar"></u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
import {
		pageLeaveApply,
		leaveType,
		myCheck
	} from '@/api/leave.js';
	
export default {
	data() {
		return {
			tabbarIndex: 0,
			listTable:[],
			list1: [
				
			],
			status: 'loadmore',
			params:{
				pageNum: 1,
				pageSize: 10,
			},
			loginType:1,
			pageMore:true,
			leaveType:[],
			tabbarName:'',
			stateList:[{text:'待确认',color:'#e1bc79',bgc:'#fef7ed'},{text:'已确认',color:'#66c0a3',bgc:'#ebfaf7'},{text:'已取消',color:'#ccc',bgc:'#fcf0f0'},{text:'已销假',color:'#ccc',bgc:'#fcf0f0'}]
		};
	},
	computed:{
		leaveTypes(){
			return (channel)=>{
				let leaveName='';
				this.leaveType.forEach(it=>{
					if(it.id==channel){
						leaveName= it.name
					}
				})
				return leaveName
			}
		}
	},
	onReachBottom: function() {
		//避免多次触发
		// if (this.loadingType == 1 || this.loadingType == 3||this.loadingType == 2) {
		// 	return;
		// }
		this.loadMoreFunc();
	},
	onUnload() {
		//#ifdef MP-WEIXIN
		uni.reLaunch({
			url: '/pages/tabbar/index/index'
		})
		//#endif
	},
	onLoad(){
		this.initParams()
		this.getleaveType()
		// 获取登录老师还是家长
		this.loginType=uni.getStorageSync('loginType')
		this.getTable()
		if(this.loginType==0){
			this.list1=[
				{
					name: '关于我的'
				},
				{
					name: '待我处理'
				},
			]
		}else{
			this.list1=[
				{
					name: '关于我的'
				},
				
			]
			
		}
		
	},
	//下拉刷新
	async onPullDownRefresh() {
		this.initParams()
		if(this.tabbarIndex==0){
			await this.getTable();
		}else{
			await this.myCheck();
		}
		
		uni.stopPullDownRefresh();
	},
	methods: {
		goBack(){
			uni.switchTab({
				url: '/pages/tabbar/index/index'
			});
		},
		add(){
			uni.navigateTo({
				url:'apply'
			})
		},
		// 获取请假类型
		async getleaveType() {
			const {
				data
			} = await leaveType()
		
			if (data.code == 0) {
				data.data.list.forEach(it => {
					this.leaveType.push({
						name: it.typeName,
						id: it.typeId
					})
				})
		
			}
		
		},
		loadMoreFunc: function() {
			if (!this.pageMore) {
				// this.loadingType = 2;
				return;
			}
			this.getTable(this.params)
		},
		initParams(){
			this.listTable=[];
			this.params.pageNum = 1;
			this.pageMore = true;
		},
		pathRes(data){
			uni.showLoading({
				title: '正在加载...',
				mask: true
			});
			if (data.code == 0) {
				uni.hideLoading();
				if (data.data.list.length == 0) {
					// this.loadingType = 3;
					this.status='nomore'
					return;
				}
				if (data.data.isLastPage) {
					this.pageMore = false;
					this.listTable = this.listTable.concat(data.data.list);
					// this.loadingType = 2;
					this.status='nomore'
				} else {
					if (data.data.isFirstPage) {
						this.listTable = data.data.list;
					} else {
						
						this.listTable = this.listTable.concat(data.data.list);
						console.log('不是第一页',this.listTable)
					}
					this.params.pageNum++;
					// this.loadingType = 0;
				}
				console.log('this.listTable',this.listTable)
					
				console.log('显示数据',this.listTable)
			}else{
				this.$api.showTip(res.data.msg);
			}
		},
		// 关于我的
		async getTable(){
			if(this.loginType==0){
				this.params.teacherId=this.$util.getUser().userId
				delete this.params.applyUserId
			}else{
				this.params.applyUserId=this.$util.getChild().userId
				delete this.params.teacherId
			}
			console.log('this.params.',this.params,this.loginType)
			const {data}=await pageLeaveApply(this.params)
			if(data.code==0){
				this.pathRes(data)
			}
		},
		// 待我处理
		async myCheck(){
			this.params.teacherId=this.$util.getUser().userId
			const {data}=await myCheck(this.params)
			if(data.code==0){
				this.pathRes(data)
			}
		},
		clickTab(item) {
			this.initParams()
			console.log('item', item);
			this.tabbarIndex=item.index;
			if(item.index==0){
				// 关于我的
				this.getTable()
			}else if(item.index==1){
				// 待我处理
				this.myCheck()
			}
		},
		goDetail(it){
			uni.navigateTo({
				url:'detail?id='+it.applyId
			})
		},
		clickTabbar(e) {
			this.tabbarIndex = e;
			console.log('eeeee', e);
			if (this.tabbarIndex == 0) {
				uni.redirectTo({
					url: '/pages/subPack/leave/apply'
				});
			} else if (this.tabbarIndex == 1) {
				uni.redirectTo({
					url: '/pages/subPack/leave/list'
				});
			}
		},
		click() {}
	}
};
</script>

<style lang="scss" scoped>
	/deep/.u-nav-slot {
		display: flex;
	}
	
	/deep/.uicon-plus {
		margin-left: 90rpx;
	}
.content{
	padding: 20rpx;
	width: 100%;
	height: 100%;
	.card{
		width: 100%;
		background-color: #fff;
		border-radius:14rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.top{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.classify{
				display: flex;
				width: 100%;
				justify-content: space-between;
				font-weight: bold;
				.state{
					padding: 10rpx 20rpx;
					background-color: #fff8ee;
					font-weight: 400;
				}
			}
		}
		.center{
			view{
				margin-bottom: 10rpx;
			}
			text{
				color: #8a8b8c;
				margin-left: 10rpx;
			}
		}
		.bottom{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
// 底部
/deep/.u-tabbar--fixed {
	border-top: 1px solid #dadbde;
}
/deep/.u-tabbar-item__text {
	font-size: 26rpx;
}
/deep/.u-icon__icon{
		font-size: 50rpx!important
	}
</style>
